<!DOCTYPE html>
<html><head>
    <meta charset="utf-8">
    <title>一颗粮食的万里长征</title>
	<style>
		body{
		    
		    display: flex;
		    justify-content: center;
		    align-items: center;
			width:100vw;
			height: 100vh;
			background-image:url("../assets/img/beijingtu.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position:center;
			margin: 0 auto;
		}
		
		.container{
		    /* 弹性布局*/
			width:100%;
			height:100%;
		    display: flex;
		    /* 溢出隐藏 */
		    overflow: hidden;
		}
		.item{
		    margin:0 auto;position: relative;
		    top:30%;width: 50px;
		  height:640px;  
		    cursor: pointer;
		    border-radius: 30px;
		    background-size: cover;
		    background-position: center;
		    transition: 0.5s cubic-bezier(0.05,0.61,0.41,0.95);
		    overflow: hidden;
		}
		.item .shadow{
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    height: 100px;
		    transition: 0.5s cubic-bezier(0.05,0.61,0.41,0.95);
		}
		.item .content{
		    display: flex;
		    position: absolute;
		    left: 10px;
		    right: 0;
		    bottom: 35px;
		    height: 70px;
		    transition: 0.5s cubic-bezier(0.05,0.61,0.41,0.95);
		}
	
		.item .content .text{
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    margin-left: 10px;
		    color: #fff;
		    width: 100%;
		}
		.item .content .text div{
		    /* 超出显示省略号（需要设置width） */
		    width: calc(100% - 70px);
		    text-overflow: ellipsis;
		    overflow: hidden;
		    white-space: nowrap;
		    opacity: 0;
		    transition: opacity 0.5s ease-out;
		}
		.item .content .text .tit{
		    font-weight: bold;
		    font-size: 22px;
		}
		.item .content .text .sub{
		    /* 设置过渡效果延迟时间 */
		    transition-delay: 0.1s;
            font-size:15px;
		}
		/* 选中态样式 */
		.item.active{
		    flex: 1;
		    margin: 0;
		    border-radius: 40px;
		}
		.item.active .shadow{
		    background: linear-gradient(to top,rgba(0,0,0,0.35) 65%,transparent);
		}
		.item.active .content{
		    bottom: 20px;
		    left: 20px;
		}
		.item.active .content .text div{
		    opacity: 1;
		}
        .jiantou{
			position: absolute;
			/* bottom:500px; */
			bottom:30vh;
			right:0px;
		}
	</style>
	 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	    <script>
	        $(document).ready(function () {
	            // 获取所有.item元素
	            let items = $('.item');
	
	            // 设置选中态样式
	            function setActive() {
	                // 遍历所有.item元素，移出active样式
	                items.removeClass('active');
	                // 为当前选中项添加active样式
	                $(this).addClass('active');
	            }
	            // 遍历所有.item元素，分别为其设置点击事件
	            items.each(function () {
	                $(this).on('click', setActive);
	            });
	        });
	    </script>
</head>

<body>
	
    <div class="container">
        <div class="item active" style="background-image: url('../assets/img/ruiliang.jpg');">
        <!-- <div class="item active" style="background-image: url(ruiliang.jpg);"> -->
            <div class="shadow"></div>
            <div class="content">
               
                <div class="text">
                    <div class="tit">泼水润粮</div>
                    <div class="sub">下沙是酱酒生命的起点。下沙指的是对投料<br>的高粱加沸水翻拌，使其均匀吸收水分。</div>
                </div>
            </div>
        </div>
        <div class="item" style="background-image: url('../assets/img/zhengliang.jpg');">
        <!-- <div class="item" style="background-image: url(zhengliang.jpg);"> -->
            <div class="shadow"></div>
            <div class="content">
               
                <div class="text">
                    <div class="tit">上甑蒸粮</div>
                    <div class="sub">蒸粮是将润好的高粱上甑蒸煮的操作。蒸粮<br>可以使高粱进一步吸水、膨胀、破裂及糊化</div>
                </div>
            </div>
        </div>
        <div class="item" style="background-image: url('../assets/img/tanliang.jpg');">
        <!-- <div class="item" style="background-image: url(tanliang.jpg);"> -->
            <div class="shadow"></div>
            <div class="content">
               
                <div class="text">
                    <div class="tit">摊晾拌曲</div>
                    <div class="sub">工人将蒸熟的高粱铺散在地上进行“摊晾”<br>过程中需要用铲子不停地翻开降温。</div>
                </div>
            </div>
        </div>
        <div class="item" style="background-image: url('../assets/img/duiji.jpg');">
        <!-- <div class="item" style="background-image: url(duiji.jpg);"> -->
            <div class="shadow"></div>
            <div class="content">
              
                <div class="text">
                    <div class="tit">堆积发酵</div>
                    <div class="sub">粮食经过蒸煮后，堆成小丘形状进行堆积发<br>酵，酒糟充分吸纳外围空气中的微生物。</div>
                </div>
            </div>
        </div>
        <div class="item" style="background-image: url('../assets/img/rujiao.jpg');">
        <!-- <div class="item" style="background-image: url(rujiao.jpg);"> -->
            <div class="shadow"></div>
            <div class="content">
               
                <div class="text">
                    <div class="tit">封窖发酵</div>
                    <div class="sub">堆积发酵成熟后，便可进行入窖发酵，在窖<br>池中会产生微生物和香味物质。</div>
                </div>
            </div>
        </div>
    </div>
   
   <div class="jiantou"><img src="../assets/img/jiantou.jpg" width="70%"></div>


</body><chatgpt-sidebar data-gpts-theme="light"></chatgpt-sidebar><chatgpt-sidebar-popups data-gpts-theme="light"></chatgpt-sidebar-popups></html>